<template>
<div class="page">
  <div class="title">预约产品演示</div>
  <div class="title1">请完善以下信息，我们的顾问会在1个工作日内与您联系，为您安排产品演示服务</div>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="280" class="content">
      <FormItem label="想了解的产品服务" prop="products">
        <Select size='large' v-model="formValidate.products">
          <Option value="产业链咨询" >产业链咨询</Option>
          <Option value="产业链招商">产业链招商</Option>
          <Option value="产业大脑">产业大脑</Option>
          <Option value="产业服务">产业服务</Option>
        </Select>
      </FormItem>
      <FormItem label="姓名" prop="username">
        <Input size='large' v-model="formValidate.username" placeholder="请输入您的姓名"></Input>
      </FormItem>
        <FormItem label="手机号" prop="mobile">
            <Input size='large' v-model="formValidate.mobile" placeholder="请输入您的手机号"></Input>
        </FormItem>
        <FormItem label="验证码" prop="code">
          <div  class="flex flex2">
            <Input size='large' v-model="formValidate.code" placeholder="请输入验证码"></Input>
            <div class='code' @click="getC">{{isSend?downNum:'获取验证码'}}</div>
          </div>
        </FormItem>
      <FormItem label="政府/园区/机构/企业名称" prop="company_name">
        <Input size='large' v-model="formValidate.company_name" placeholder="请输入您的公司名称"></Input>
      </FormItem>
    <FormItem label="您的职务">
        <Input size='large' v-model="formValidate.career" placeholder="请输入您的职务"></Input>
      </FormItem>
    <FormItem label="备注">
      <Input type="textarea" :autosize="{minRows: 4,maxRows: 5}"  v-model="formValidate.remarks" placeholder="您可以详细描述您的问题及需求"></Input>
    </FormItem>
  </Form>
  <div class='bottom-form'>
    <div class='btn' @click='save'>立即预约</div>
  </div>
</div>
</template>
<script>
import { getCode, postMsg } from '@/api/api.js'
export default {
  data(){
    return{
      formValidate:{
        username:'',
        products:'',
        company_name:'',
        remarks:'',
        mobile:'',
        career:'',
        code:''
      },
      ruleValidate: {
        username: [
            { required: true, message: '请输入您的姓名', trigger: 'blur' }
        ],
        products: [
            { required: true, message: '请选择您的想了解的产品', trigger: 'change' }
        ],
        company_name: [
            { required: true, message: '请输入您的公司名称', trigger: 'blur' }
        ],
        mobile: [
            { required: true, message: '请输入您的手机号', trigger: 'blur' }
        ],
        code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
      },
      isSend:false,
      downNum:60
    }
  },
  methods: {
    getC(){
      if( this.isSend ){
        return
      }
      var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
      var flag = reg.test(this.formValidate.mobile)
      if(!flag){
        this.$Message.warning('请输入正确的手机号')
        return
      }
      this.isSend = true
      this.downNum=60
      let time= setInterval(()=>{
        this.downNum-=1
        if(this.downNum==0){
          this.downNum=60
          clearInterval(time)
          this.isSend = false
        }
      },1000)
      getCode({mobile:this.formValidate.mobile}).then(res=>{
        if(res.status==1){
          this.$Message.success(res.msg)
        }
      }).catch(err=>{
        this.$Message.error(err)
        this.downNum=60
        this.isSend = false
        clearInterval(time)
      })
    },
    save(){
      this.$refs.formValidate.validate((valid) => {
        if (!valid) {
          return
        }
        let data = Object.assign({},this.formValidate)
        postMsg(data).then(res=>{
          if(res.status==1){
            this.$Message.success(res.msg)
            this.$refs.formValidate.resetFields();
            this.formValidate.career=''
            this.formValidate.remarks=''
            this.isSend = false
          }else{
            this.$Message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page{
  width:100%;
}
.title{
  width: 100%;
  padding: 1rem 0 6px 0;
  text-align: center;
  font-size: 1.5rem;
  font-family: MicrosoftYaHeiUI;
  color: #2d3937;
  line-height: 3.1875rem;
}
.title1{
  padding:0 30px;
}
.flex{
  display:flex;
  justify-content: space-between;
  width: 100%;
  &::v-deep .ivu-form-item {
      width: 49%;
  }
}
.flex1{
  width: 49%;
}
.flex2{
  &::v-deep .ivu-input-wrapper{
    width: 60%;
  }
  .code{
    background: #effcff;
    display:flex;
    justify-content:center;
    align-items:center;
    width:38%;
    cursor: pointer;
    color: #098ffd;
  }
}
.page{
  .content{
    width: 100%;
    margin: 0 auto;
    padding:0 15px;
    margin-top: 30px;
  }
  &::v-deep .ivu-form-item-label{
    text-align:left;
  }
   &::v-deep .ivu-form-item-content{
    margin-left:0 !important;
  }
  &::v-deep .ivu-input{
    background: #effcff;
    border: none;
    padding:5px;
  }
  &::v-deep .ivu-select{
    text-align:left;
  }
  &::v-deep .ivu-select-selection{
    background: #effcff;
    border:none;
  }
}
.btn{
  width: 9rem;
  height: 3rem;
  background: linear-gradient(
135deg
,#fcc560,#feb15a);
  border-radius: 1.5rem;
  text-align: center;
  line-height: 3rem;
  color: #000;
  font-size: 1rem;
  margin-left: 5.625rem;
  margin:20px auto 30px;
}
</style>